<template>
    <div>
        <div class="panel">
            <div class="padding_16" style="min-height: 524px;padding-top: 70px;">
                <el-form ref="form" :rules="formrules" :model="form" label-width="100px">
                    <el-form-item label="类型：">
                        <el-input readonly v-model="$route.query.name" style="width: 565px;"></el-input>
                    </el-form-item>
                    <el-form-item label="金额：">
                        <el-input type="number" readonly v-model="$route.query.price" style="width: 565px;"></el-input>
                    </el-form-item>
                    <el-form-item label="支付方式：" class="clearfix">
                        <div class="pay-channel-tab" v-for="(item,index) in tyoelist" :key="index" :class="item.type == applyType ? 'payTabActive':''" @click="changeType(item.type)">
                            <div class="item__img--icon">
                                <img :src="item.pic" width="119" height="31" />
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="收款二维码：" class="clearfix">
                        <img v-show="applyType == 1" :src="codeData.s_weixin" width="119" height="119" />
                        <img v-show="applyType == 2" :src="codeData.s_alipay" width="119" height="119" />
                    </el-form-item>
                    <el-form-item label="备注：" prop="o_remark">
                        <el-input type="textarea" v-model="form.o_remark" placeholder="联系方式：1520212xxxx  支付方式：微信" style="width: 565px;"></el-input>
                    </el-form-item>
                    <el-form-item label="" class="mt_50">
                        <el-button type="primary" @click="onSubmit('form')" class="btn_145">{{$route.query.type == 1 ? '开通':'续费'}}</el-button>
                        <router-link to="/dashboard"><el-button class="btn_145">取消</el-button></router-link>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>

    import '../../assets/css/workbench.css'
    import '../../assets/css/projects.css'
    export default {
        data(){
            return{
                form: {
                    'o_remark': '',
                },
                formrules: {
                    'o_remark': [
                        { required: true, message: '请输入备注信息', trigger: 'blur' }
                    ],
                },
                tyoelist: [
                    {'pic': require('../../assets/images/icon4.png'),'type': '1'},
                    {'pic': require('../../assets/images/icon3.png'),'type': '2'},
                ],
                applyType: 1,
                codeData: {},
            }
        },
        methods: {
            init(){
                var _this = this;
                //获取收款二维码
                this.$httpGet('/api/index/System/memberPage').then(response => {
                    
                    if(response.code == 200){
                        
                        _this.codeData = response.msg;

                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                })
            },
            // 切换支付方式
            changeType(type){
                this.applyType = type;
            },
            //提交表单
            onSubmit(formName){
                var _this = this;

                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //提交
                        var data = {};
                        data.o_uid = window.localStorage.uid
                        data.o_mid = _this.$route.query.msid;
                        data.o_type = _this.applyType;
                        data.o_remark = _this.form.o_remark;
                        this.$httpPost('/api/index/System/addOrder',data).then(response => {
                    
                            if(response.code == 200){
                                
                                this.$message({
                                    message: response.msg,
                                    type: 'success'
                                });
                                setTimeout(function(){
                                    _this.$router.push({'path': '/dashboard',query: {'type': 1}})
                                },2000)

                            }else{
                                this.$message({
                                    message: response.msg,
                                    type: 'warning'
                                });
                            }

                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        },
        mounted(){
            this.init();
        },
    }
</script>
<style scoped>
    .pay-channel-tab {
        width: 154px;
        height: 54px;
        margin-right: 12px;
        padding: 0;
        text-align: center;
        border-radius: 3px;
        border: 1px solid #eaeaea;
        cursor: pointer;
        float: left;
    }
    .pay-channel-tab.payTabActive {
        border: solid 1px #2093ff;
    }
    .pay-channel-tab .item__img--icon {
        padding-top: 10px;
    }
    .mt_50{
        margin-top: 50px;
    }
    .btn_145{
        width: 145px;
    }
</style>